<script setup lang="ts">
//七格内容
import { SingleMeat } from "@/store/interface";
import Images from "@/components/block/images.vue";
import SingleShow from "@/components/block/public/singleShow.vue";
const props = defineProps<{ data: SingleMeat[] }>();

//第一篇文章数据
const dataOne = props.data[0];
//移除第一篇文章的数据
const dataTwo = props.data.slice(1);
</script>
<template>
  <section class="common-normal-box">
    <header class="d-flex justify-content-between">
      <h5>热门推荐</h5>
      <div class="floor-tab d-flex justify-content-center align-items-center">
        <a class="active" v-show="false">热门推荐</a>
        <a href="#" class="floor-link" v-show="false">更多推荐</a>
      </div>
    </header>
    <aside class="common-flex-box multi-line flex-four">
      <figure class="advertise flex-2in4">
        <Images :img="dataOne.featured_image" />
        <a :href="dataOne.link" class="ad-click-mask"></a>
      </figure>

      <SingleShow :data="dataTwo"></SingleShow>
    </aside>
  </section>
</template>
<style scoped lang="less">
.floor-tab {
  overflow: hidden;
  a:before {
    display: inline-block;
    position: absolute;
    left: -18px;
    top: 50%;
    width: 3px;
    height: 3px;
    background: #bebebe;
    content: "";
  }
  a.active {
    font-weight: 700;
  }
  a {
    display: inline-block;
    margin: 0 15px;
    font-size: 14px;
    color: #666;
    position: relative;
  }
}



.common-flex-box {
  .flex-2in4 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
  }
}

//子内容

/* 偶数个li标签没有右边框 */
.common-flex-box section:nth-child(even) {
  /* border-right: none;*/
}

/* 倒数第一个和第二个li标签没有底边框 */
.common-flex-box section:nth-last-child(1),
.common-flex-box section:nth-last-child(2) {
  border-bottom: none;
}
</style>
